<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {width: 100px; height: 100px; background-color: #45dfff; margin: 10px;}
	</style>
	<script src="../jquery-1.10.1.min.js"></script>
	<script type="text/javascript">
	/*
		$()下的常用方法:
			delegate() : 事件委托。利用冒泡机制来完成的，括号内是发生事件的元素，前面是被委托的对象。事件委托后的性能，会比给每一个元素加事件的性能好

			undelegate() : 取消事件委托
	*/
	$(function() {
		$('ul').delegate('li', 'click', function () {		//不能写$('li'),不然所有li就都变色了
			$(this).css('background-color', '#45dfff');

			$('ul').undelegate();
		});
	});
	</script>
</head>
<body>
	<ul>
		<li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
	</ul>
</body>
</html>